<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">

<!-- th:fragment 定义需要引入的代码块，该div包含的内容即为引用的公共内容 -->
<div th:fragment="header">
    <!-- ==================== S top ==================== -->
    <header class="top header-v4 desktops-section default-top">
        <!-- top-bar -->
        <div class="top-bar clearfix">
            <div class="page-width clearfix">
                <div id="a1portalSkin_topAreaB" class="QHDEmptyArea top-widget float-right"></div>
                <div id="a1portalSkin_topAreaA" class="QHDEmptyArea top-widget float-left"></div>
            </div>
        </div>
        <!-- top-bar -->
        <div class="page-width clearfix">
            <!-- S top-main -->
            <div class="top-main">
                <div class="page-width clearfix">
                    <div class="logo" skinobjectzone="HtmlLogo_634"><a href="javascript:;">
                        <img th:src="${company.logo}" th:alt="${company.name}"/></a></div>
                    <!-- end of logo -->
                    <!-- S language -->
                    <div class="language" skinobjectzone="HtmlLanguage_689"></div>
                    <!-- E language -->
                    <div class="top-main-content float-right">
                        <!-- S nav -->
                        <nav class="nav">
                            <div class="main-nav clearfix" skinobjectzone="menu_870">
                                <ul class="sf-menu">
                                    <li class='current'><a class="first-level" href="/"><strong>首页</strong></a><i></i></li>
                                    <li class=""><a class="first-level" href="javascript:;" target=""><strong>关于我们</strong></a><i></i>
                                        <ul class="">

                                            <li  th:each="about:${abouts}">
                                                <a th:href="@{/index/about?id=}+${about.id}">
                                                    <strong th:text="${about.title}"></strong>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class=""><a class="first-level"  th:href="@{/index/product}"><strong>产品中心</strong></a><i></i>
                                        <ul class="">

                                            <li th:each="pCategorie:${pCategories}">
                                                <a th:href="@{/index/product?categoryId=}+${pCategorie.id}">
                                                    <strong th:text="${pCategorie.name}"></strong>
                                                </a>
                                            </li>

                                        </ul>
                                    </li>
                                    <li class=""><a class="first-level" th:href="@{/index/article}"><strong>新闻资讯</strong></a><i></i>
                                        <ul class="">

                                            <li th:each="aCategorie:${aCategories}">
                                                <a th:href="@{/index/product?categoryId=}+${aCategorie.id}">
                                                    <strong th:text="${aCategorie.name}"></strong>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class=""><a class="first-level"  th:href="@{/index/example}"><strong>成功案例</strong></a><i></i>
                                        <ul class="">

                                            <li th:each="eCategorie:${eCategories}">
                                                <a th:href="@{/index/product?categoryId=}+${eCategorie.id}">
                                                    <strong th:text="${eCategorie.name}"></strong>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class=""><a class="first-level" th:href="@{/index/messageBoard}"><strong>在线留言</strong></a><i></i>
                                        <ul class="">

                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </nav>
                        <!-- E nav-->
                    </div>
                </div>
            </div>
            <!-- E top-main -->
        </div>
    </header>
    <!-- S touch-top-wrapper -->
    <div class="touch-top mobile-section clearfix">
        <div class="touch-top-wrapper clearfix">
            <div class="touch-logo" skinobjectzone="HtmlLogo_1717"><a class="" href="javascript:;">
                <img th:src="${company.logo}" th:alt="${company.name}" /></a></div>
            <!-- S touch-navigation -->
            <div class="touch-navigation">
                <div class="touch-toggle">
                    <ul>
                        <li class="touch-toggle-item-last"><a href="javascript:;" class="drawer-menu" data-drawer="drawer-section-menu"><i
                                class="touch-icon-menu"></i><span>导航</span></a></li>
                    </ul>
                </div>
            </div>
            <!-- E touch-navigation -->
        </div>
        <!-- S touch-top -->
        <div class="touch-toggle-content touch-top-home">
            <!--<div class="drawer-section drawer-section-language">
      <ul class="touch-language clearfix" skinobjectzone="HtmlLanguage_1982">
        <li><a href="javascript:;">中文简体</a></li>
      </ul>
    </div>-->
            <div class="drawer-section drawer-section-menu">
                <div class="touch-menu" skinobjectzone="menu_2200">
                    <ul>
                        <li><a href="/"><span>首页</span></a></li>
                        <li><a href="javascript:;"><span>关于我们</span><i class="touch-arrow-down"></i></a>
                            <ul>

                                <li  th:each="about:${abouts}">
                                    <a th:href="@{/index/about?id=}+${about.id}">
                                        <span th:text="${about.title}"></span>
                                    </a>
                                </li>

                            </ul>
                        </li>
                        <li><a href="javascript:;"><span>产品中心</span><i class="touch-arrow-down"></i></a>
                            <ul>

                                <li th:each="pCategorie:${pCategories}">
                                    <a th:href="@{/index/product?categoryId=}+${pCategorie.id}">
                                        <span th:text="${pCategorie.name}"></span>
                                    </a>
                                </li>

                            </ul>
                        </li>
                        <li><a href="javascript:;"><span>新闻资讯</span><i class="touch-arrow-down"></i></a>
                            <ul>

                                <li th:each="aCategorie:${aCategories}">
                                    <a th:href="@{/index/product?categoryId=}+${aCategorie.id}">
                                        <span th:text="${aCategorie.name}"></span>
                                    </a>
                                </li>

                            </ul>
                        </li>
                        <li><a href="javascript:;"><span>成功案例</span><i class="touch-arrow-down"></i></a>
                            <ul>

                                <li th:each="eCategorie:${eCategories}">
                                    <a th:href="@{/index/product?categoryId=}+${eCategorie.id}">
                                        <span th:text="${eCategorie.name}"></span>
                                    </a>
                                </li>

                            </ul>
                        </li>

                        <li><a th:href="@{/index/messageBoard}"><span>在线留言</span></a>
                            <ul>

                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <script type="text/javascript">
                $(document).ready(function() {

                    $(".touch-toggle a").click(function(event) {
                        var className = $(this).attr("data-drawer");

                        if ($("." + className).css('display') == 'none') {
                            $("." + className).slideDown().siblings(".drawer-section").slideUp();
                        } else {
                            $(".drawer-section").slideUp();
                        }
                        event.stopPropagation();
                    });

                    /*$(document).click(function(){
                     $(".drawer-section").slideUp();
                    })*/

                    $('.touch-menu a').click(function() {
                        if ($(this).next().is('ul')) {
                            if ($(this).next('ul').css('display') == 'none') {
                                $(this).next('ul').slideDown();
                                $(this).find('i').attr("class", "touch-arrow-up");
                            } else {
                                $(this).next('ul').slideUp();
                                $(this).next('ul').find('ul').slideUp();
                                $(this).find('i').attr("class", "touch-arrow-down");
                            }
                        }
                    });
                });
            </script>
        </div>
        <!-- E touch-top -->
    </div>
    <!-- E touch-top-wrapper -->
    <!-- ==================== E top ==================== -->
</div>
</html>